<!--帮助中心-->
<template>
  <div class="help-container">
    <!-- 搜索栏 -->
    <el-input
      v-model="searchQuery"
      placeholder="输入关键词快速查找答案"
      class="search-bar"
      prefix-icon="Search"
      @focus="showFocus = true"
      @blur="showFocus = false"
    >
      <template #append>
        <el-button 
          type="primary" 
          :disabled="!searchQuery"
          @click="handleSearch"
        >搜索</el-button>
      </template>
    </el-input>

    <!-- 动态提示 -->
    <transition name="fade">
      <div 
        v-if="showFocus && !filteredTexts.length"
        class="no-results"
      >暂无匹配结果，请尝试其他关键词</div>
    </transition>

    <!-- 滑动区域 -->
    <div class="carousel-container" ref="carousel">
      <div 
        class="carousel-track" 
        :style="{ transform: `translateX(${currentOffset}px)` }"
      >
        <div 
          v-for="(item, index) in filteredTexts" 
          :key="index" 
          class="carousel-item"
          :class="{ 'active': activeIndex === index }"
        >
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
          <div class="divider"></div>
        </div>
      </div>
    </div>

    <!-- 导航按钮 -->
    <div class="nav-buttons">
      <el-button 
        type="primary" 
        icon="ArrowLeft" 
        circle 
        size="large"
        @click="prevSlide"
        :disabled="activeIndex <= 0"
      />
      <el-button 
        type="primary" 
        icon="ArrowRight" 
        circle 
        size="large"
        @click="nextSlide"
        :disabled="activeIndex >= filteredTexts.length - 1"
      />
    </div>

    <!-- 进度条 -->
    <div class="progress-indicator">
      <span>第 {{ activeIndex + 1 }} 条</span>
      <span>/ 共 {{ filteredTexts.length }} 条</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const texts =[ { title: '订单如何配送？', 
content: '我们会根据商品所在地、顾客所在地和商品尺寸重量选择最优物流商。目前暂不支持自选快递，具体物流信息可在订单详情中查看。' 
}, 
{ title: '我的包裹多久能送到？', 
content: '订单支付成功后1-3天内发货（节假日顺延），送达时间视快递配送时间而定。' 
}, 
{ title: '如何申请免费退换？', 
content: '非质量问题在签收7日内联系客服并提供凭证，可享受免费退换服务（需满足商品完好且包装完整）。' }, 
{ title: '在线支付已完成，为什么订单仍显示待付款？',
 content: '网络延迟可能导致系统未及时更新，请耐心等待5分钟后再刷新页面。若款项已扣除请联系客服处理。' }, 
 { title: '商品实际颜色与图片有差异？', 
 content: '因拍摄光线和屏幕显示差异可能存在轻微色差，建议以实物为准，收到后24小时内可无理由退换。' }, 
 { title: '下单后可以修改订单信息吗？', 
 content: '支付前可在订单详情页修改收货地址和发票信息，支付后需联系客服协助处理。' },
  { title: '客服联系方式是什么？', content: '您可以通过在线客服或拨打400-1688-168获取人工服务（工作日9:00-21:00）。' }, 
  { title: '使用优惠券后退款金额怎么算？', content: '按实际支付金额退款，优惠券部分不可退还，但后续订单仍可正常使用该券。' }, 
  { title: '如何判断商品是否缺货？', content: '商品页面会实时显示库存状态，若显示"预售"则预计7个工作日内发货。' }, 
  { title: '发票如何开具？', content: '订单完成后30天内可在账户中心自助申请电子发票，抬头信息需与订单信息一致。' }];

const searchQuery = ref('');
const currentOffset = ref(0);
const activeIndex = ref(0);
const showFocus = ref(false);

const filteredTexts = computed(() => {
  return texts.filter(item =>
    item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    item.content.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

const carousel = ref(null);

onMounted(() => {
  const itemWidth = carousel.value.clientWidth;
  currentOffset.value = -activeIndex.value * itemWidth;
});

const handleSearch = () => {};

const prevSlide = () => {
  if (activeIndex.value > 0) {
    activeIndex.value--;
    currentOffset.value += carousel.value.clientWidth;
  }
};

const nextSlide = () => {
  if (activeIndex.value < filteredTexts.value.length - 1) {
    activeIndex.value++;
    currentOffset.value -= carousel.value.clientWidth;
  }
};
</script>

<style scoped>
.help-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.search-bar {
  width: 50%;
  max-width: 600px;
  margin-bottom: 40px;
  border-radius: 32px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-bar:focus-within {
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

.no-results {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #999;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.carousel-container {
  height: 400px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  background-color: #f9fafb;
  transition: all 0.3s ease;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-item {
  min-width: 100%;
  padding: 40px;
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-item:last-child {
  border-right: none;
}

.active {
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  margin: 20px 0;
}

.nav-buttons {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.nav-buttons button {
  pointer-events: all;
  opacity: 0.8;
  transition: all 0.3s ease;
  font-size: 32px;
  padding: 12px;
  background-color: #409eff;
  color: #fff;
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
}

.nav-buttons button:hover,
.nav-buttons button:focus {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(64, 158, 255, 0.5);
}

.progress-indicator {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .help-container {
    padding: 20px;
  }

  .search-bar {
    width: 100%;
    max-width: none;
  }

  .carousel-container {
    height: 300px;
  }

  .carousel-item {
    padding: 20px;
  }

  .nav-buttons {
    bottom: 20px;
    top: auto;
    transform: none;
  }

  .progress-indicator {
    bottom: 60px;
  }
}
</style>